<template>
<div>
      <div class="iconBox flex" :style="getStyle(item.color,item.backColor)">
         <img :src="item.img" v-if="item.img">
         <font-awesome-icon :icon="item.icon" v-if="item.FAI" class="FontAwesomeIcon"/>
          <i :class="item.icon" id="icon" v-else></i> 
      </div>
       <div class="content flex">
          <div class="overflow-more  name" :style="getStyle(item.color,null)" v-html="item.content"></div>
          <i class="el-icon-close exit" @click="deleteInform(item.id)"></i>
       </div>

</div>  
</template>
<script>
import {mapMutations} from 'vuex'
  export default 
  {
     name :'', 
     props:['item'],
     
     data() {
        return {
            timer:null
        }
     },
     methods: {
        ...mapMutations('Tool',['INFOEMDELETE']),
        deleteInform(id){

            this.item.isShow=false
            let timer = setTimeout(() => {
                this.INFOEMDELETE(id)
                clearTimeout(timer)
            }, 400);
        },
        getStyle(color,BackColor){
            return {color,background:BackColor}
        },     
        init(){
            this.timer=setInterval(() => {

                if(this.item.duration<=0){           
                    this.deleteInform(this.item.id)
                     clearInterval(this.timer)
                }
                this.item.duration -= 1
            }, 1000);
        }
     },
     mounted() {
        this.init()
     },
     destroyed(){
         clearInterval(this.timer)
         if(this.item.isShow)
         this.deleteInform(this.item.id)
     }
  }
</script>
<style scoped lang='less'>
.iconBox{
    height: 100%;
    width: 70px;
    margin-right: 10px;
    background: skyblue;
    color: white;

    
    i,.FontAwesomeIcon{font-size: 30px;}

}
.content{
     max-width: 300px;
     position: relative;
     padding-right: 40px;
     height: 100%;
}
.name{
    min-width: 150px;
    max-width: 250px;
    letter-spacing: 2px;
}
.exit{
    position: absolute;
    top: 5px;right: 5px;
}
.exit:hover{
    transform: scale(1.1);
    color: red;
    background: none;
}

</style>